<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no,
		 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="./css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />


		<script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/lunbo.css" />
		<script src="./swiper/swiper-bundle.min.js"></script>
		<script src="./js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<title></title>

	</head>
	<body>
		<div class="header container">
			<div class="header_left">

			</div>
			<div class="header_center">
				输入搜索的内容
			</div>
			<div class="header_right">
				<div class="header_right_left"><a href="../分类/index.html" style="color: #000000;">分类</a></div>
				<div class="header_right_right"></div>
			</div>
		</div>
		<div class="banner container">`
			<div style="height: auto;" class="bannder container swiper-container">
				<div class="swiper-wrapper">

					<!-- 下面是4个不同颜色的轮播滑块 -->
					<div class="swiper-slide sw-slide slide"><img src="img/banner@2x.png">
					</div>
					<div class="swiper-slide slide"><img src="img/banner@2x.png"></div>
					<div class="swiper-slide slide"><img src="img/banner@2x.png"></div>
					<div class="swiper-slide slide"><img src="img/banner@2x.png"></div>
				</div>
				<!-- <div class="swiper-button-prev" ></div> -->
				<!--左箭头-->
				<!-- <div class="swiper-button-next"></div> -->
				<!--右箭头-->
				<div class="swiper-pagination"></div>
				<!--分页器（就是4个点点）-->
			</div>
		</div>
		<div class="container">
			<ul class="nav">
				<li>
					<a href="#">
						<span><img src="img/xl@2x(2).png"></span>
						<span>学习中心</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span><img src="img/xl@2x(3).png"></span>
						<span>选课中心</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span><img src="img/xl@2x.png"></span>
						<span>数学课程</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span><img src="img/xl@2x(1).png"></span>
						<span>在线课程</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="sheji container">
			<div class="sheji_left">
				<span>技术学院</span>
				<span>2473人已订阅</span>
			</div>
			<div class="sheji_right">
				<ul>
					<li>
						<span>技术学院</span>
						<span>2473人已订</span>
					</li>
					<li>
						<span>技术学院</span>
						<span>2473人已订</span>
					</li>
					<li>
						<span>技术学院</span>
						<span>2473人已订</span>
					</li>
					<li>
						<span>技术学院</span>
						<span>2473人已订</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="jiner container">
			<div class="jiner_left">
				今日新课
			</div>
			<div class="jiner_right">
				查看全部>
			</div>
		</div>
		<div class="yinying">
			<div class="jiner_bd">
				<div class="jiner_bd_left">
			
				</div>
				<div class="jiner_bd_right">
					<span>tiny老师教你新媒体运营</span>
					<span>学完轻松写出爆款文案</span>
					<div class="jiner_bd_right_bottom">
						<div class="jiner_bd_right_left">￥99</div>
						<div class="jiner_bd_right_right">限量免费</div>
			
					</div>
			
				</div>
			
			</div>
			<div class="jiner_bottom">
				<div class="jiner_bottom_left">
					限报名前200人
				</div>
				<div class="jiner_bottom_center">
					已有<span>84</span>人领取
				</div>
				<div class="jiner_bottom_right">
					免费领取
				</div>
			</div>
		</div>
		<div class="yinying">
			<div class="jiner_bd">
				<div class="jiner_bd_left">
			
				</div>
				<div class="jiner_bd_right">
					<span>tiny老师教你新媒体运营</span>
					<span>学完轻松写出爆款文案</span>
					<div class="jiner_bd_right_bottom">
						<div class="jiner_bd_right_left">￥99</div>
						<div class="jiner_bd_right_right">限量免费</div>
			
					</div>
			
				</div>
			
			</div>
			<div class="jiner_bottom">
				<div class="jiner_bottom_left">
					限报名前200人
				</div>
				<div class="jiner_bottom_center">
					已有<span>84</span>人领取
				</div>
				<div class="jiner_bottom_right">
					免费领取
				</div>
			</div>
		</div>
		<div class="yinying">
			<div class="jiner_bd">
				<div class="jiner_bd_left">
			
				</div>
				<div class="jiner_bd_right">
					<span>tiny老师教你新媒体运营</span>
					<span>学完轻松写出爆款文案</span>
					<div class="jiner_bd_right_bottom">
						<div class="jiner_bd_right_left">￥99</div>
						<div class="jiner_bd_right_right">限量免费</div>
			
					</div>
			
				</div>
			
			</div>
			<div class="jiner_bottom">
				<div class="jiner_bottom_left">
					限报名前200人
				</div>
				<div class="jiner_bottom_center">
					已有<span>84</span>人领取
				</div>
				<div class="jiner_bottom_right">
					免费领取
				</div>
			</div>
		</div>
		<div class="yinying">
			<div class="jiner_bd">
				<div class="jiner_bd_left">
			
				</div>
				<div class="jiner_bd_right">
					<span>tiny老师教你新媒体运营</span>
					<span>学完轻松写出爆款文案</span>
					<div class="jiner_bd_right_bottom">
						<div class="jiner_bd_right_left">￥99</div>
						<div class="jiner_bd_right_right">限量免费</div>
			
					</div>
			
				</div>
			
			</div>
			<div class="jiner_bottom">
				<div class="jiner_bottom_left">
					限报名前200人
				</div>
				<div class="jiner_bottom_center">
					已有<span>84</span>人领取
				</div>
				<div class="jiner_bottom_right">
					免费领取
				</div>
			</div>
		</div>
		<div class="xianshang container">
			<div class="xianshang_hd">
				<div class="xianshang_hd_left">
					线上分享
				</div>
				<div class="xianshang_hd_right">
					查看全部>
				</div>
			</div>
		</div>
		<div class="lunbo container">
			<!-- Swiper -->
			<div class="swiper mySwiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="main">
							<div class="main_hd">
								<img src="img/500577327@2x(1).png" alt="">
							</div>
							<div class="wenzi container">
								<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
								<div class="main_bd_bd">
									<div class="main_bd_bd_left">
										来自千图网平台
									</div>
									<div class="main_bd_bd_right">
										1.2万次播放
									</div>
								</div>
							</div>
						</div>
						<!-- <div class="swiper-pagination"></div> -->
					</div>
					<div class="swiper-slide">
						<div class="main">
							<div class="main_hd">
								<img src="img/500577327@2x(1).png" alt="">
							</div>
							<div class="wenzi container">
								<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
								<div class="main_bd_bd">
									<div class="main_bd_bd_left">
										来自千图网平台
									</div>
									<div class="main_bd_bd_right">
										1.2万次播放
									</div>
								</div>
							</div>
						</div>
						<!-- <div class="swiper-pagination"></div> -->
					</div>
					<div class="swiper-slide">
						<div class="main">
							<div class="main_hd">
								<img src="img/500577327@2x(1).png" alt="">
							</div>
							<div class="wenzi">
								<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
								<div class="main_bd_bd">
									<div class="main_bd_bd_left">
										来自千图网平台
									</div>
									<div class="main_bd_bd_right">
										1.2万次播放
									</div>
								</div>
							</div>
						</div>
						<!-- <div class="swiper-pagination"></div> -->
					</div>
					<div class="swiper-slide">
						<div class="main">
							<div class="main_hd">
								<img src="img/500577327@2x(1).png" alt="">
							</div>
							<div class="wenzi container">
								<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
								<div class="main_bd_bd">
									<div class="main_bd_bd_left">
										来自千图网平台
									</div>
									<div class="main_bd_bd_right">
										1.2万次播放
									</div>
								</div>
							</div>
						</div>
						<!-- <div class="swiper-pagination"></div> -->
					</div>
					<div class="swiper-slide">
						<div class="main">
							<div class="main_hd">
								<img src="img/500577327@2x(1).png" alt="">
							</div>
							<div class="wenzi container">
								<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
								<div class="main_bd_bd">
									<div class="main_bd_bd_left">
										来自千图网平台
									</div>
									<div class="main_bd_bd_right">
										1.2万次播放
									</div>
								</div>
							</div>
						</div>
						<!-- <div class="swiper-pagination"></div> -->
					</div>
					<div class="swiper-slide">
						<div class="main">
							<div class="main_hd">
								<img src="img/500577327@2x(1).png" alt="">
							</div>
							<div class="wenzi container">
								<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
								<div class="main_bd_bd">
									<div class="main_bd_bd_left">
										来自千图网平台
									</div>
									<div class="main_bd_bd_right">
										1.2万次播放.
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<!-- 四个小点 -->

				</div>
					
				</div>

				<div class="swiper-pagination"></div>
			</div>
			
			
			
			
			
			
			
			<div class="footer container">
				<ul>
					<li>
						<a href="../首页/index.html">
							<span>&#xe751;</span>
							<span>首页</span>
						</a>
					</li>
					<li>
						<a href="../课程/index.html">
							<span>&#xe614;</span>
							<span>课程</span>
						</a>
					</li>
					<li>
						<a href="../话题和关注/index.html">
							<span>
								&#xe630;
								</svg>
							</span>
							<span>话题</span>
						</a>
					</li>
					<li>
						<a href="../我的/index.html">
							<span>&#xe600;</span>
							<span>我的</span>
						</a>
					</li>
				</ul>
			</div>
	</body>
</html>


<script>
	var mySwiper = new Swiper('.swiper-container', { //初始化Swiper
		autoplay: { //自动切换
			delay: 3000,
			stopOnLastSlide: false,
			disableOnInteraction: false,

		},
		navigation: { //前进后退
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',

		},
		pagination: { //分页器
			el: '.swiper-pagination',
			clickable: true,

		},
		loop: true, //循环
	})
</script>
<!-- Initialize Swiper -->
<script>
	var swiper = new Swiper(".mySwiper", {
		slidesPerView: "auto",
		spaceBetween: 30,
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});
</script>
